<template>
  <div>
    <table class="tb">
      <tr><strong>欢迎光临_vue开发的收银系统_水果店</strong></tr>
      <tr>苹果{{price}}￥/斤,折扣 《{{discount}}折》</tr>
      <tr>请输入你要的购买斤数<input type="text" v-model.number="num"></tr>
      <tr><button @click="btn">结账买单~</button></tr>
      <tr>结账单:总价:{{sum}} 折后价:{{(this.sum * this.discount)/10}}￥元 省了:{{this.sum - (this.sum * this.discount)/10 }}￥元</tr>
    </table>
   </div>
</template>
 
<script>
export default {
  data() {
    return {
      price:10,
      discount:8,
      num:'', //数量
      sum:0 //总价
    };
  },
  methods: {
    btn(){
      this.sum = this.price * this.num
      this.num = ''
    }
  }
};
</script>

<style scoped>
     .tb {
       margin: auto;
       border-collapse: collapse;
       width: 400px;
     }
     .tb tr {
       width: 400px;
       display: inline-block;
       border:1px solid black;
       padding:5px;
       text-align: center;
     }
</style>